<template>
    <div>
      <Card class="clearfix" style="padding-bottom: 16px">
        <p slot="title">
          数据列表
        </p>
        <Form label-position="left" :label-width="72">
          <Row :gutter="24">
            <i-col span="6">
              <FormItem label="订单编号：">
                <Input v-model="orderNo" placeholder="请输入订单编号"/>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="购车编号：" width="150px">
                <Input v-model="tradeOrderId" placeholder="请输入购车订单编号"/>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="车商名称：">
                <Input v-model="partyName" placeholder="请输入车商名称"/>
              </FormItem>
            </i-col>
           <i-col span="6">
            <FormItem label="订单状态：">
              <Select v-model="orderStatus" style="width:150px">
                <Option  :value="3" >待安排</Option>
                <Option  :value="4" >待发运</Option>
                <Option  :value="5" >运输中</Option>
                <Option  :value="6" >待收车</Option>
                <Option  :value="7" >已完成</Option>
                <Option  :value="-1" >已取消</Option>
              </Select>
            </FormItem>
          </i-col>

          </Row>
          <Row :gutter="24">

            <i-col span="6">
              <FormItem label="汽车车系：">
                <Select v-model="carSeriesValue" filterable remote label-in-value
                  :remote-method="remoteMethod1" :loading="loading1" clearable @on-change="selectCarSeries">
                  <Option v-for="(item,index) in carSeriesList" :value="item.value" :key="index" :label="item.value">{{ item.value }}</Option>
              </Select>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="始发地：">
                <Select  filterable remote label-in-value
                  :remote-method="remoteMethod2" :loading="loading2" clearable @on-change="selectStartCity">
                  <Option v-for="(item,index) in startCityList" :value="item.value" :key="index" :label="item.value">{{ item.value }}</Option>
              </Select>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="目的地：">
                <Select  filterable remote label-in-value
                  :remote-method="remoteMethod3" :loading="loading3" clearable  @on-change="selectEndCity">
                  <Option v-for="(item,index) in endCityList" :value="item.value" :key="index" :label="item.value">{{ item.value }}</Option>
              </Select>
              </FormItem>
            </i-col>
            <i-col span="6">
              <Button type="success" @click="searchData" icon="ios-search" >搜索</Button>
            </i-col>
          </Row>
        </Form>
        <!--<div class="btn-group-list">
          <Button  @click="addData" v-if="access.add" icon="ios-checkmark" style="width:90px;" type="primary">新增</Button>
        </div>-->
        <br>
        <div>
            <list-table refs="table1" v-model="tableData" :access="access" :table-data="tableData"></list-table>
        </div>
        <Page ref="pages" :total="itemTotal" show-total style="float: right; margin-top: 20px" @on-change="getList"></Page>
      </Card>
    </div>
</template>

<script>
import listTable from './components/listTable.vue'
import ajax from '../../../libs/axios.js'
export default {
    name: 'personalindex',
    components: {
        listTable
    },
    data () {
        return {
            loginName: '',          // 用户名称
            itemTotal: 0,           // 条数
            tableData: [],          // 数据集
            orderNo:'',             // 订单编号
            tradeOrderId:'',        // 购车订单号
            orderStatus:3,          // 订单状态
            partyName:'',           // 车商名称
            carSeriesList:[],       // 车系列表
            startCityList:[],       // 开始城市集合
            endCityList:[],         // 目的地城市集合
            beginCity: '',          // 始发地
            endCity:'',             // 目的地
            carSeriesValue:'',      // 搜索数据
            kezu_testModelShow:false,
            loading1:false,
            loading2:false,
            loading3:false,
            access:{
                edit: true,         // 控制编辑按钮显示
                func: true,
                remove: true,
                add: true
            },
        }
    },
    mounted () {
      this.init()
    },
    activated() {
      this.init()
    },
    methods: {
        // 数据初始化
        init () {
           this.$store.commit('setActiveName', 'ordercheckindex');
           this.getList(1)
        },
        /*  // 新增
        addData () {
          this.kezu_testModelShow = true
            let argu = {
                id: 'add'
            }
            this.$router.push({
                name: 'addhandleorder',
                params: argu
            })
        },*/
        // 搜索
        searchData () {
            if (this.orderStatus == undefined){
              this.orderStatus="";
            }
            this.getList(1)
        },
        // 获取表格数据
        getList (page) {
            let _that = this;
            let url = 'adminlogin/transportOrder/selectTransportOrderInfos'
            let data = {
                type: 2,
                pageSize: 10,
                pageNum: page,
                orderNo: this.orderNo,
                tradeOrderId: this.tradeOrderId,
                orderStatus: this.orderStatus,
                partyName: this.partyName,
                beginCity:this.beginCity,
                endCity:this.endCity,
                carSeries:this.carSeriesValue,
                cancelTime:'',
                beginDate:''
            }
            ajax.formRes(url, data).then(res => {
                _that.tableData = res.data.rows;
                _that.itemTotal = res.data.total;
            }).catch(err => {
                  console.log('有错误信息')
            })
        },
        // 汽车车系
        selectCarSeries(item){
          if('undefined' == typeof(item)){
            this.carSeriesValue = ''
          }else{
            this.carSeriesValue = item.value
          }
        },
        // 汽车车系
        remoteMethod1 (query) {
            let that = this
            if (query !== '') {
                this.loading1 = true;
                setTimeout(() => {
                    this.loading1 = false;
                    let url = '/adminlogin/transportOrder/selectCarSeriesByLike'
                    let data = {
                        param:query
                    }
                    ajax.formRes(url, data).then(res => {
                       if (200 == res.code) {
                            const list = res.seriesList.map((item,index) => {
                                return {
                                    value: item,
                                    label: index
                                };
                            });
                            that.carSeriesList = list
                        } else {
                            that.$Message.success('数据原因，请联系管理员。');
                        }
                    }).catch(res => {
                        console.log('有错误信息')
                    })
                }, 200);
            } else {
                this.options1 = [];
            }

        },
        // 始发地
        selectStartCity(item){
          if('undefined' == typeof(item)){
            this.beginCity = ''
          }else{
            this.beginCity = item.value
          }
        },
        // 始发地
        remoteMethod2 (query) {
            let that = this
            if (query !== '') {
                this.loading2 = true
                setTimeout(() => {
                    this.loading2 = false;
                    let url = 'adminlogin/transportOrder/selectCityAndProvinceByLike'
                    let data = {
                        level:2,
                        param:query
                    }
                    ajax.formRes(url, data).then(res => {
                       if (200 == res.code) {
                            const list = res.lists.map((item,index) => {
                                return {
                                    value: item,
                                    label: index
                                };
                            });
                            that.startCityList = list
                        } else {
                            that.$Message.success('数据原因，请联系管理员。');
                        }
                    }).catch(res => {
                        console.log('有错误信息')
                    })
                }, 200);
            } else {
                this.startCityList = [];
            }

        },
        // 目的地
        selectEndCity(item){
          if('undefined' == typeof(item)){
            this.endCity = ''
          }else{
            this.endCity = item.value
          }
        },
        // 目的地
        remoteMethod3 (query) {
            let that = this
            if (query !== '') {
                this.loading3 = true;
                setTimeout(() => {
                    this.loading3 = false;
                    let url = 'adminlogin/transportOrder/selectCityAndProvinceByLike'
                    let data = {
                        level:2,
                        param:query
                    }
                    ajax.formRes(url, data).then(res => {
                       if (200 == res.code) {
                            const list = res.lists.map((item,index) => {
                                return {
                                    value: item,
                                    label: index
                                };
                            });
                            that.endCityList = list
                        } else {
                            that.$Message.success('数据原因，请联系管理员。');
                        }
                    }).catch(res => {
                        console.log('有错误信息')
                    })
                }, 200);
            } else {
                this.options1 = [];
            }

        },
    },
}
</script>


<style lang="less">
  @import "../../../styles/common.less";
  @import "../../../styles/table.less";
</style>

